<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <table-filter />
        <action-bar />
        <el-button-group style="margin-left: 10px;">
          <el-button :type="viewType==='table' ? 'primary' : 'default'" size="mini" icon="el-icon-s-grid" @click="toggleView('table')" />
          <el-button :type="viewType==='list' ? 'primary' : 'default'" size="mini" icon="el-icon-menu" @click="toggleView('list')" />
        </el-button-group>
      </div>
      <PageableTable
        v-show="viewType === 'table'"
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <router-link :to="'/cmdb/schemas/' + row._id" class="el-button el-button--text el-button--mini"><i class="el-icon-edit" /></router-link>
            <el-button title="删除" type="text" size="mini" icon="el-icon-delete" @click="remove(row._id)" />
          </template>
        </el-table-column>
      </PageableTable>
      <div v-show="viewType === 'list'" :loading="loading" :style="{ height: height + 'px'}" style="display: flex;">
        <div v-for="value in listSize.data" :key="value" style="padding: 0 10px;">
          <div v-for="dataItem in value" :key="dataItem.code">
            <router-link :to="'/cmdb/schemas/' + dataItem._id" class="el-button el-button--text el-button" style="color: inherit;"><i class="el-icon-menu"> {{ dataItem.name }}</i></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import { list, page, remove } from '@neu/cmdb-ui/api/schema'
import databind from '@neu/biz-core/mixins/databind'
const noimg = require('@neu/cmdb-ui/assets/images/noimg.png')

export default {
  name: 'SchemasPage',
  components: {
    TableFilter,
    ActionBar,
    PageableTable
  },
  mixins: [databind],
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        {
          title: '图标',
          key: 'icon',
          render: (h, params) => {
            return (
              <el-image style='width: 50px; height: 50px;' src={params.row.icon} fit='contain'>
                <div slot='error' class='image-slot'>
                  <el-image src={noimg} fit='contain' />
                </div>
              </el-image>
            )
          }
        },
        { title: '模型名', key: 'name' },
        { title: '模型标识', key: 'code' },
        { title: '描述', key: 'desc' },
        { title: '创建时间', key: 'created' }
      ],
      viewType: 'table',
      dataList: []
    }
  },
  computed: {
    height() {
      const height = this.tableHeight + 40
      return height
    },
    listSize() {
      const rows = Math.round((this.tableHeight + 40) / 40)
      const columns = Math.ceil(this.dataList.length / rows)
      const data = []
      for (let i = 0; i < columns; i++) {
        const arr = this.dataList.slice(i * rows, (i + 1) * rows)
        data.push(arr)
      }
      return {
        rows,
        columns,
        data
      }
    }
  },
  created() {
    this.$store.dispatch('cmdb/loadDatatypes')
    this.$store.dispatch('cmdb/loadRelationtypes')
    this.filter()
  },
  methods: {
    toggleView(viewType) {
      if (viewType === 'list') {
        this.loading = true
        list().then(response => {
          this.dataList = response.data
          this.loading = false
        })
      }
      this.viewType = viewType
    }
  }
}
</script>

<style scoped>
.router-link {
  margin: 0 10px;
}
</style>
